<template>
    <div>
        <header-ele><div class="nav-list">
        <span class="active">
            <i class="iconfont icon-location"></i>商品
        </span>
        <a href="#detail-info">
            <span>
            <i class="iconfont icon-location"></i>商品详情
        </span>
        </a>
        <span>
            <i class="iconfont icon-location"></i>商品推荐
        </span>
    </div></header-ele>
    <silder class="silider"></silder>
    <section class="detail-info" id="detail-info">
    <p class="detail-info-name">{{shopInfo&&shopInfo.name}}</p>
    <p class="detail-info-subtitle">{{shopInfo&&shopInfo.subtitle}}</p>
    <div>
        <span class="detail-info-price">￥{{shopInfo&&shopInfo.price}}</span>
        <span class="detail-info-stock">库存{{shopInfo&&shopInfo.stock}}}件</span>
    </div>
</section>
<section class="detail-content" ref="detailContent" id="content">
    <p class="detail-gap"></p>
    <ul>
        <li>概述</li>
        <li>参数</li>
        <li>安装服务</li>
        <li>常见问题</li>
    </ul>
    <div>
        <p>
            <img :src="val" alt="" v-for="(val,index) in shopInfo&&shopInfo.detail" :key="index">
        </p>
    </div>
</section>

<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" />
  <van-goods-action-icon icon="cart-o" text="购物车" :info="$store.state.shopCount" />
  <van-goods-action-button type="warning" text="加入购物车" @click="changShow" />
  <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
<van-sku v-model="show" :sku="sku" :goods-id="goodsId" :goods="goods" @buy-clicked="onBuyClicked" @add-cart="onAddCartClicked" @stepper-change = 'onStepperChange' />
    </div>
</template>

<script>
import headerEle from '../components/header.vue'
import silder from '../components/slider.vue'
export default {
    data() {
        return {
            shopInfo:null,
            imgList:[],
            show: false,
            goodsId:null,
            goods:{
  // 默认商品 sku 缩略图
  picture: 'https://img01.yzcdn.cn/1.jpg'
},
            sku:{
  // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
  // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
  tree: [
    {
      k: '颜色', // skuKeyName：规格类目名称
      k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
      v: [
        {
          id: '1', // skuValueId：规格值 id
          name: '红色', // skuValueName：规格值名称
          imgUrl: 'https://img01.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
          previewImgUrl: 'https://img01.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片
        },
        {
          id: '1',
          name: '蓝色',
          imgUrl: 'https://img01.yzcdn.cn/2.jpg',
          previewImgUrl: 'https://img01.yzcdn.cn/2p.jpg',
        }
      ],
      largeImageMode: true, //  是否展示大图模式
    },
  ],
  // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
  list: [
    {
      id: 2259, // skuId
      s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
    //   s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 100, // 价格（单位分）
      stock_num: 100 // 当前 sku 组合对应的库存
    },
     {
      id: 2259, // skuId
      s1: '2', // 规格类目 k_s 为 s1 的对应规格值 id
    //   s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 100, // 价格（单位分）
      stock_num: 100 // 当前 sku 组合对应的库存
    }
  ],
  price: '1.00', // 默认价格（单位元）
  stock_num: 227, // 商品总库存
  collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
  none_sku: false, // 是否无规格商品
  messages: [
    {
      // 商品留言
      datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
      multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
      name: '留言', // 留言名称
      type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
      required: '0', // 是否必填 '1' 表示必填
      placeholder: '', // 可选值，占位文本
      extraDesc: ''  // 可选值，附加描述文案
    }
  ],
  hide_stock: false // 是否隐藏剩余库存
}
        }
    },
    methods: {
        changShow(){

            this.show = true
        },
        onBuyClicked(){
        },
        onAddCartClicked(obj){
            this.$axios({
                url:'cart/add',
                method:'post',
                Headers:{'contentType':'application/x-www-form-urlencoded'},
                data:`productId=${obj.goodsId}&count=${obj.selectedNum}`
            }).then(()=>{
                this.$store.dispatch('getShopInfo')
                this.$router.push('/shop')
            })
        },
        onStepperChange(){
        }
    },
    created(){
        this.$store.commit('changeFooterShow',false)
        this.$axios({
            url:'product/detail',
            params:{id:this.$route.params.id}
        }).then((res)=>{
            console.log(res);
            this.goodsId = res.data.data.id
            this.goods.picture = res.data.data.imageHost+res.data.data.mainImage
            this.sku.price = '0-'+res.data.data.price
            this.sku.list[0].price = res.data.data.price * 100
            this.sku.tree[0].v.forEach((val,index)=>{
              val.previewImgUrl =   val.imgUrl = res.data.data.imageHost+res.data.data.mainImage
              val.id = index+1
            })
            if(res.data.data.subImages){
                res.data.data.subImages.split(',').forEach(item => {
                this.imgList.push({
                    imgUrl : res.data.data.imageHost+item
                })
            });
            }
             
             if(res.data.data.detail) 
            {let imgReg = /<img.*?(?:>|\/>)/gi
            let srcReg  = /<img.*?src="(.*?)".*?\/?>/i
           let arr = res.data.data.detail.match(imgReg);
            res.data.data.detail = []
           for (let i = 0; i < arr.length; i++) {
                    let src = arr[i].match(srcReg);
                    //获取图片地址
                    if(src[1]){
                        res.data.data.detail.push(src[1])
                    }
            }}
            this.shopInfo = res.data.data
        })
       
    },
    components:{
        headerEle,
        silder
    }
}
</script>

<style lang="scss" scoped>
@import '../common/style/mixin.scss';
.silider{
    margin-top: 100px;
}
.product-detail {
    width: 100%;

    .detail-nav {
        @include fj;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 88px;
        padding: 0 20px;
        line-height: 88px;
        box-sizing: border-box;
        z-index: 1000;
        color: #252525;
        background: #fff;
        border-bottom: 1px solid #dcdcdc;

        i {
            font-size: 50px;
            color: #000;
        }

        div span {
            padding: 0 20px;
            font-size: 28px;

            &.active {
                color: $red;
            }

            .iconfont {
                padding-right: 8px;
                font-size: 28px;
                color: $red;
            }
        }
    }
}
//商品信息详情
.detail-info {
    width: 100%;
    padding: 20px 30px;
    font-size: 30px;
    box-sizing: border-box;

    .detail-info-name {
        font-size: 40px;
        color: #333;
    }

    .detail-info-subtitle {
        padding: 10px 0;
        font-size: 28px;
        color: #999;
    }

    div {
        @include fj;
        height: 70px;
        line-height: 80px;
        padding: 10px 0;
        font-size: 32px;
        color: #999;

        .detail-info-price {
            color: $red;
            font-size: 44px;
        }
    }
}


.detail-content {
    width: 100%;

    .detail-gap {
        width: 100%;
        height: 20px;
        background: #eee;
    }

    ul {
        @include fj;
        width: 100%;
        margin: 20px 0;

        li {
            flex: 1;
            padding: 10px 0;
            text-align: center;
            font-size: 30px;
            border-right: 1px solid #999;
            box-sizing: border-box;

            &:last-child {
                border-right: none;
            }
        }
    }

    div {
        width: 100%;
       

        p {
            width: 100%;
            font-size: 40px;
            text-align: center;
            img {
            width: 100%;
            height: 100%;
        }
        }
        
    }
   

}


 
</style>